<template>
    <div>
        <div class='showCourse'>
             <div class='subjectInfo'>
                最新课程
            </div>
            <div class='moreCourse'>
                 <span><router-link to='Main/choose-Lesson'>更多&gt;</router-link></span>
            </div>
            <div class='courseInfo clearfix'>
                 <course-info 
                 v-for='course in ArrayOfFewData' 
                 :src="course.src" 
                 :courseName="course.courseName" 
                 :oldPrice="course.oldPrice" 
                 :newPrice="course.newPrice"
                 :to='course.url'></course-info>
            </div>
        </div>
        <div class='showCourse'>
             <div class='subjectInfo'>
                热门课程
            </div>
            <div class='moreCourse'>
                <span><router-link to='Main/choose-Lesson'>更多&gt;</router-link></span>
            </div>
            <div class='courseInfo clearfix'>
                 <course-info 
                 v-for='course in ArrayOfFewData' 
                 :src="course.src" 
                 :courseName="course.courseName" 
                 :oldPrice="course.oldPrice" 
                 :newPrice="course.newPrice"
                 :to='course.url'></course-info>
            </div>
        </div>
    </div>
</template>
<script>
    import CourseInfo from './CourseInfo.vue'
    export default{
        data(){
            return {
                courseInfo:[
                    {src:"../../static/lux_1.jpg",courseName:"Lux教学视频1",oldPrice:"500",newPrice:"200",url:'a'},
                    {src:"../../static/lux_2.jpg",courseName:"Lux教学视频2",oldPrice:"400",newPrice:"300",url:'a'},
                    {src:"../../static/lux_3.jpg",courseName:"Lux教学视频3",oldPrice:"600",newPrice:"400",url:'a'},
                    {src:"../../static/lux_4.jpg",courseName:"Lux教学视频4",oldPrice:"700",newPrice:"500",url:'a'},
                ]
            }
        },
        components:{
            CourseInfo,
        },
        computed:{
            // 获取数组的前几条数据.
            ArrayOfFewData(){
                return this.courseInfo.slice(0,2);//不应该修改原数据
            }
        }
    }
</script>
<style  lang='scss'>
    /* ShowCourse.vue */
    @import '../assets/css/function';
    .showCourse{
        background:white;
        position:relative;
        width:100%;
        margin-bottom:pxtorem(20px);
        .subjectInfo{
            background:#ff6600;
            width:pxtorem(80px);
            height:pxtorem(30px);
            line-height:pxtorem(30px);
            text-align:center;
            color:white;
            position:absolute;
            transform:translateX(pxtorem(10px))translateY(pxtorem(-10px));
            font-size:pxtorem(18px);
            
        }
        .moreCourse{
            color:#ccc;
            text-align:right;
            font-size:pxtorem(16px);
            width:100%;
            height:pxtorem(30px);
            line-height:pxtorem(30px);
            span{
                float:right;
                margin-right:pxtorem(10px);
                a{
                    color:#ccc;
                }
            }
        }
        .courseInfo{
            width:100%;
        }

    }
</style>